@import "../../../styles/_commonColor.scss";

.homeBox {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 120px;
  background: $white;
  overflow: auto;
}

.font60 {
  font-size: 60px;
}

//首页头部文字
.homeTop {
  padding: 60px 0 90px;
  text-align: center;

  p {
    font-size: 26px;
    line-height: 36px;
    color: #6a6a6a;
    span {
      margin-left: 18px;
      color: #6cb7e2;
    }
    .borderB {
      border-bottom: 1PX solid $blue;
    }
  }
}

.buttonContainer {
  padding:80px 30px 0 30px;
}

//年检时间进度条
.progresBox {
  position: relative;
  text-align: center;
  line-height: 0;
  background: $white;
  overflow: hidden;
  margin:108px 0 0 0;

  .progres {
    position: relative;
    display: inline-block;
    width: 420px;
    height: 375px; //416px 375px
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    z-index: 9;

    .progresDaysBox {
      position: relative;
      left: 0;
      top: 90px;
      font-size: 132px;
      height: 190px;
      line-height: 190px;
      width: 100%;
      text-align: center;
      .font60 {
        position: relative;
        top: -20px;
        font-weight: normal;
      }
      span {
        color: #09BB07;
        font-weight: bold;
      }
      i {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        font-style: normal;
        line-height: normal;
        font-size: 24px;
        color: #a7a7a7;
      }
    }

    .inspectionTypeItem {
      position: absolute;
      bottom: 1PX;
      left: 50%;
      margin-left: -110px;
      display: inline-block;
      width: 220px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      font-size: 30px;
      color: #888888;
      &:before{
        content: ' ';
        display: inline-block;
        vertical-align: middle;
        width:24px;
        height:1px;
        border-bottom:solid #e2e2e2 1PX;
        margin-right: 8px;
      }
      &:after{
        content: ' ';
        display: inline-block;
        vertical-align: middle;
        width:24px;
        height:1px;
        border-bottom:solid #e2e2e2 1PX;
        margin-left: 8px;
      }
    }
    .disableInspectionType{
      color:#DDDDDD;
    }
  }
}

//圆形进度条
.circularBox {
  position: absolute;
  left: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  margin-left: -202px;
  height: 404px;
  width: 404px;
  z-index: 1;

  //绿色 未进入预约期
  .circular {
    position: absolute;
    left: 0;
    top: 0;
    height: 404px;
    width: 404px;
    border-radius: 50%;
    line-height: 0;
    z-index: 1;
  }

  .circular1Box {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
  }

  .hideCircular {
    position: absolute;
    width: 50%;
    height: 100%;
    background: $white;
  }

  .circular1 .hideCircular {
    right: 0;
  }

  .circular2 .hideCircular {
    left: 0;
  }

  .whiteCircular {
    position: absolute;
    left: 0;
    bottom: -2px;
    background: $white;
    width: 392px;
    height: 52px;
    z-index: 2;
  }

}

.circular1 {
  background: -webkit-gradient(linear, center top, center bottom, from(#00d627), to(#00D0A9));
  transform: rotate(0deg);
  // &.blueCircular{
  //         background: -webkit-gradient(linear, center top, center bottom, from(#00b2ff), to(#009EFF));
  // }
  // &.redCircular{
  //         background: -webkit-gradient(linear, center top, center bottom, from(#ff6822), to(#FF4646));
  // }
}

.circular2 {
  background: -webkit-gradient(linear, center top, center bottom, from(#00d627), to(#69E221));
  transform: rotate(0deg);
  // &.blueCircular{
  //         background: -webkit-gradient(linear, center top, center bottom, from(#00b2ff), to(#00DDFF));
  // }
  // &.redCircular{
  //         background: -webkit-gradient(linear, center top, center bottom, from(#ff6822), to(#FF8B00));
  // }
}

//灰色进度条
.grayCircularBox {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 60px;
  overflow: hidden;

  z-index: 3;
  .grayCircularBoxLeft {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 286px;
    width: 90px;
    background: #E3E3E3;
  }
  .grayCircularBoxRight {
    position: absolute;
    right: 0;
    top: 344px;
    bottom: 0;
    width: 90px;
    background: #E3E3E3;
  }
  .grayCircularBoxTop {
    position: absolute;
    right: 90px;
    // width: 112PX;
    top: 0;
    height: 90px;
    background: #E3E3E3;
  }
}

//首页年检提醒信息
.homeMsgBox {
  padding: 130px 30px 0;
  text-align: center;
  div {
    padding-bottom: 18px;
    font-size: 38px;
    line-height: 52px;
    color: #09BB07;
  }
  span {
    font-size: 26px;
    line-height: 36px;
    color: #6a6a6a;
  }
}

//按钮底部文字
.homeBtnBottom {
  color: #9b9b9b;
  font-size: 26px;
  line-height: 36px;
  text-align: center;

  span {
    border-bottom: 1PX solid #9b9b9b;
  }
}

//首页底部文字
.homeFooter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0px 30px 44px 30px ;
  background: #fff;
  z-index: 10;
  text-align: center;
  img{
    height:40px;
    width:40px;
    vertical-align: middle;
  }
  span{
    font-size: 26px;
    color:$black;
    vertical-align: middle;
  }
}

.btn {
  width: 100%;
  height: 84px;
  line-height: 84px;
  background: #2582EA;
  color: #fff;
  font-size: 34px;
  text-align: center;
  border-radius: 6px;

  &:active {
    opacity: .8;
  }
}

.notClickBtn {
  background: #e9e9e9;
  color: #c6c6c6;
  &:active {
    background: #e9e9e9;
  }
}

.btnWhite {
  margin: 0 auto;
  background: #fff;
  border: 1PX solid #2582EA;
  border-radius: 6px;
  width: 100%;
  height: 84px;
  line-height: 84px;
  text-align: center;
  font-size: 34px;
  color: #2582EA;
}

//重写颜色
.homeBlue {
  .circular1 {
    background: -webkit-gradient(linear, center top, center bottom, from(#00b2ff), to(#009EFF));
  }
  .circular2 {
    background: -webkit-gradient(linear, center top, center bottom, from(#00b2ff), to(#00DDFF));
  }
  .progresBox .progres .progresDaysBox span {
    color: #00AEFF;
  }
  .homeMsgBox div {
    color: #2fb3fe;
  }
}

.homeRed {
  .circular1 {
    background: -webkit-gradient(linear, center top, center bottom, from(#ff6822), to(#FF4646));
  }
  .circular2 {
    background: -webkit-gradient(linear, center top, center bottom, from(#ff6822), to(#FF8B00));
  }
  .progresBox .progres .progresDaysBox span {
    color: #FF4444;
  }
  .homeMsgBox div {
    color: #FF4444;
  }
  .progresBox .progres .progresDaysBox i {
    color: #FF4444;
  }
}

.homeGray {
  .circular1 {
    background: #E8E8E8;
  }
  .circular2 {
    background: #E8E8E8;
  }
  .progresBox .progres .progresDaysBox span {
    color: #a7a7a7;
  }
  .homeMsgBox div {
    color: #6c6c6c;
  }
  .progresBox .progres .progresDaysBox i {
    color: #a7a7a7;
  }
}

//图标
.iconPromptI {
  &:after {
    content: '';
    display: inline-block;
    position: relative;
    top: 8px;
    width: 40px;
    height: 40px;
    background: url('../../../images/icon-prompt.png') center center no-repeat scroll;
    background-size: auto 30px;
  }
}
//提示弹框主体样式
.confirmMessage{
  text-align: center;
  .main{
    font-size: 36px;
    color:$black;
  }
  .tips{
    font-size: 32px;
    color:$darkgray;
  }

}